<script setup>
  import PageA from './components/PageA.vue';
  import PageB from './components/PageB.vue';
  import PageE from './components/PageE.vue';

  import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';

  const logoImageUrl = '../../public/logo.png';
  const title = ref([
    {
      name: '首页',
      url: 'http://www.baidu.com',
    },
    {
      name: '数博概况',
      url: 'http://www.baidu.com',
    },
    {
      name: '展馆信息',
      url: 'http://www.baidu.com',
    },
    {
      name: '数博要闻',
      url: 'http://www.baidu.com',
    },
    {
      name: '江城幻境',
      url: 'http://www.baidu.com',
    },
    {
      name: '吉刻有礼',
      url: 'http://www.baidu.com',
    },
    {
      name: '文博轻舟',
      url: 'http://www.baidu.com',
    },
  ]);

  const currentPage = ref(0);
  const isScrolling = ref(false);

  const pageA = useTemplateRef('pageA');
  // const pageB = useTemplateRef('pageB');
  const pageE = useTemplateRef('pageE');

  // 通过ref获取子组件DOM
  const pages = ref([pageA, pageE]);

  // 滚轮事件处理
  const handleWheel = e => {
    e.preventDefault();
    if (isScrolling.value) return;

    isScrolling.value = true;
    const delta = Math.sign(e.deltaY);

    let newPage = currentPage.value + delta;
    if (newPage < 0) {
      newPage = 0;
    }
    if (newPage > pages.value.length - 1) {
      newPage = pages.value.length - 1;
    }
    if (newPage !== currentPage.value) {
      currentPage.value = newPage;
      smoothScrollToPage(newPage);
    } else {
      isScrolling.value = false;
    }
  };

  // 平滑滚动到指定页面
  const smoothScrollToPage = pageIndex => {
    const targetPage = pages.value[pageIndex];
    if (!targetPage) return;

    console.log(targetPage.value);
    console.log(targetPage.value.$el);

    targetPage.value.$el.scrollIntoView({ behavior: 'smooth' });
    if (pageIndex != 0) {
      headerColor.value = 'animA';
    } else {
      headerColor.value = 'animB';
    }
    setTimeout(() => {
      isScrolling.value = false;
    }, 500);
  };

  // 初始化滚动位置
  const initScroll = () => {
    window.scrollTo(0, 0);
  };

  onMounted(() => {
    initScroll();
    window.addEventListener('wheel', handleWheel, { passive: false });
  });

  onUnmounted(() => {
    window.removeEventListener('wheel', handleWheel);
  });

  function openWebsite(url) {
    window.open(url, '_blank');
  }

  // 动画
  const headerColor = ref('');
</script>

<template>
  <div class="header" :class="headerColor">
    <div style="width: 30%; height: 100%">
      <img :src="logoImageUrl" class="logo" />
    </div>
    <div
      style="
        position: absolute;
        top: 2rem;
        left: 20rem;
        right: 3vw;
        text-align: right;
        font-size: 16px;
        color: #fff;
        font-weight: 500;
        cursor: pointer;
        height: 2.5rem;
      "
    >
      <div style="display: inline-block; margin: 1vw" v-for="(item, index) in title" @click="openWebsite(item.url)">
        {{ item.name }}
      </div>
    </div>
  </div>

  <PageA ref="pageA"></PageA>
  <!-- <PageB ref="pageB"></PageB> -->
  <PageE ref="pageE"></PageE>
</template>

<style scoped>
  .header {
    height: 20vh;
    width: 100%;
    top: 0px;
    position: fixed;
    z-index: 120;
    transition: 0.3;
    transition: 'background 0.3s ease-in-out';
  }

  .logo {
    position: absolute;
    top: 2rem;
    left: 7vw;
    width: 14rem;
  }

  .animA {
    /* 动画名 */
    animation-name: animA;
    /* 持续时间 */
    animation-duration: 0.6s;
    /* 延迟时间 */
    /* animation-delay: 0s; */
    /* 播放次数 infinite*/
    animation-iteration-count: 1;
    /* 反向或交替运行动画*/
    animation-direction: normal;
    /* 速度曲线
    ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
    linear - 规定从开始到结束的速度相同的动画
    ease-in - 规定慢速开始的动画
    ease-out - 规定慢速结束的动画
    ease-in-out - 指定开始和结束较慢的动画
    cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值 */
    animation-timing-function: ease-in-out;
    /* 指定动画的填充模式 */
    animation-fill-mode: forwards;
  }

  @keyframes animA {
    0% {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    }
    100% {
      background: linear-gradient(to bottom, rgba(18, 97, 176, 0.5) 0%, rgba(18, 97, 176, 0) 100%);
    }
  }

  .animB {
    /* 动画名 */
    animation-name: animB;
    /* 持续时间 */
    animation-duration: 0.6s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }

  @keyframes animB {
    0% {
      background: linear-gradient(to bottom, rgba(18, 97, 176, 0.5) 0%, rgba(18, 97, 176, 0) 100%);
    }
    100% {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    }
  }
</style>
